<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/frame.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">

        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }
    </style>
<body>


<table class="layui-hide" id="test"></table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" disabled="" value="{{d.status}}" lay-skin="switch" lay-text="运行|停止" lay-filter="status" {{ d.status == 'on' ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>



<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">总览</li>
        <li>能力</li>
        <li>服务实例</li>
        <li>接入方</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show layui-form layui-form-pane">
            <blockquote class="layui-elem-quote">top 10，多个纬度qps，avg， timeout， pending </blockquote>
            <div class="layui-form layui-form-pane" >
                <div id="container" style="height: 480px;width:640px;"></div>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
                <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
                <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
                <script type="text/javascript">
                    var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {
                        title: {
                            text: 'QPS',
                            subtext: '纯属虚构'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: ['00:00', '00:01', '00:02', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisPointer: {
                                snap: false
                            }
                        },
                        visualMap: {
                            show: false,
                            dimension: 0,
                            pieces: [{
                                lte: 6,
                                color: 'green'
                            }, {
                                gt: 6,
                                lte: 8,
                                color: 'red'
                            }, {
                                gt: 8,
                                lte: 14,
                                color: 'green'
                            }, {
                                gt: 14,
                                lte: 17,
                                color: 'red'
                            }, {
                                gt: 17,
                                color: 'green'
                            }]
                        },
                        series: [
                            {
                                name:'并发量',
                                type:'line',
                                smooth: true,
                                data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                                markArea: {
                                    data: [ [{
                                        name: '早高峰',
                                        xAxis: '07:30'
                                    }, {
                                        xAxis: '10:00'
                                    }], [{
                                        name: '晚高峰',
                                        xAxis: '17:30'
                                    }, {
                                        xAxis: '21:15'
                                    }] ]
                                }
                            }
                        ]
                    };
                    ;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                    </script>
            </div>
        </div>
        <script type="text/html" id="tableBar">
            <a class="layui-btn layui-btn-xs oka-btn-radius" lay-event="detail">详细</a>
        </script>
        <script type="text/html" id="machineTpl">
            <a href="javascript:;" data-id="{{ d.machineId }}" class="layui-table-link" name="machine-btn" target="_blank">{{ d.machineInfo }}</a>
        </script>
        <script type="text/html" id="stateTpl">
            {{#  if(d.state == 0){ }}
            <span style="color: #ccc;">关机</span>
            {{#  } else if(d.state == 1) { }}
            <span style="color:#00a65a;">运行</span>
            {{#  } else if(d.state == 2) { }}
            <span style="color:#FFB800;">暂停</span>
            {{#  } }}
        </script>

        <div class="layui-tab-item">
            <div class="layui-form layui-form-pane" id="ability-form">
                <div class="layui-form-item layui-form-text" style="margin-bottom: 0">
                    <div class="layui-input-block">
                        <table class="layui-table" lay-data="{even:true, height:260, page:false, id:'instances'}" lay-filter="instances">
                            <thead>
                            <tr>
                                <th lay-data="{type:'numbers'}"></th>
                                <th lay-data="{field:'machineInfo', width:100}">trace id</th>
                                <th lay-data="{field:'port', width:100}">biz id</th>
                                <th lay-data="{field:'port', width:100}">time</th>
                                <!-- 运行 挂起  关闭-->
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-tab-item">
            <div class="layui-form layui-form-pane" id="ability-form">
                <div class="layui-form-item layui-form-text" style="margin-bottom: 0">
                    <div class="layui-input-block">
                        <table class="layui-table" lay-data="{even:true, height:260, page:false, id:'instances'}" lay-filter="instances">
                            <thead>
                            <tr>
                                <th lay-data="{type:'numbers'}"></th>
                                <th lay-data="{field:'machineInfo', width:100}">trace id</th>
                                <th lay-data="{field:'port', width:100}">biz id</th>
                                <th lay-data="{field:'port', width:100}">time</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-tab-item">
            <div class="layui-form layui-form-pane" id="ability-form">
                <div class="layui-form-item layui-form-text" style="margin-bottom: 0">
                    <div class="layui-input-block">
                        <table class="layui-table" lay-data="{even:true, height:260, page:false, id:'instances'}" lay-filter="instances">
                            <thead>
                            <tr>
                                <th lay-data="{type:'numbers'}"></th>
                                <th lay-data="{field:'machineInfo', width:100}">trace id</th>
                                <th lay-data="{field:'port', width:100}">biz id</th>
                                <th lay-data="{field:'port', width:100}">time</th>
                                <!-- 运行 挂起  关闭-->
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'oka'], function () {
        laydate = layui.laydate;
        laydate.render({
            elem: '#date'
        });
    });
</script>


</body></html>